<template>
  <ScaleScreen
    :width="1920"
    :height="1080"
    class="large-screen"
    :selfAdaption="true"
  >
    <div class="bg">
      <div class="host-body">
        <!-- 头部 -->
        <div class="large-screen-title">
          <span class="large-screen-text">实验室看板</span>
          <span class="large-screen-time">{{ realTime }}</span>
        </div>
        <!-- 内容-->
        <slot></slot>
      </div>
    </div>
  </ScaleScreen>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Polling } from "@/utils/polling";
import ScaleScreen from "@/components/ScaleScreen/index.vue";
import dayjs from "dayjs";

// 获取 年月日-星期日-时分秒
const realTime = ref("");
const updateTime = () => {
  const now = dayjs();
  const weekdays = ["日", "一", "二", "三", "四", "五", "六"];
  realTime.value = `${now.format("YYYY-MM-DD")} 周${
    weekdays[dayjs().day()]
  } ${now.format("HH:mm:ss")}`;
};

// 轮询
const polling = new Polling(updateTime, 1000);

// 全屏
const onMaximize = () => {
  document.getElementById("app").classList.add("main-maximize");
};
onMaximize();

onMounted(() => {
  polling.start();
});

// 销毁
onBeforeUnmount(() => {
  polling.stop();
});
</script>

<style lang="scss">
@import "./index.scss";
</style>
